<style lang="less">
    @import '../../../styles/common.less';
</style>
<template>
        <card>
            <p slot="title">
                <Icon type="ios-list" />
                页面列表
            </p>
            <Row>
                <Input v-model="pageNameQuery" placeholder="请输入页面名称..." style="width: 200px"/>
                <Input v-model="pageCreateUserQuery" placeholder="请输入页面创建人..." style="width: 200px"/>
                <Button @click="handleRead" type="primary" icon="search">搜索</Button>
            </Row>
            <Row class="margin-top-10 searchable-table-con1">
                <div>
                    <Table refs="formTemplate" border :columns="columns" :data="records" @on-row-click="handleRowClick" highlight-row></Table>
                </div>
            </Row>
            <Row class="margin-top-10 searchable-table-con1">
                <Page :total="totalCount" :page-size="size" show-total @on-change="changePage"></Page>
            </Row>
        </card>
</template>
<script>
    import api  from '../../../libs/api';
    import {eventBus} from "../../../libs/eventBus"
    export default {
        name: 'pageTemplate',
        data() {
            return {
                records:[],  //表单列表
                totalCount:0,//表单列表总页数
                current: 1,//当前页
                size: 10,//页面大小
                totalPage: 0, //总条数
                pageNameQuery:"",//表单名称
                pageCreateUserQuery:"", //表单创建人
                columns: [
                    {
                        title: '页面名称',
                        key: 'pageName'
                    },
                    {
                        title: '页面创建人',
                        key: 'createUserView'
                    },
                    {
                        title: '状态',
                        key: 'statusView'
                    },
                    {
                        title: '创建时间',
                        key: 'createTime'
                    },
                    {
                        title: '更新时间',
                        key: 'updateTime'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Poptip', {
                                    props: {
                                        confirm: true,
                                        title: '您确定要删除这条数据吗?',
                                        transfer: true,
                                    },
                                    on: {
                                        'on-ok': () => {
                                            this.handleDelete(params.row.id);
                                        }
                                    }
                                }, [
                                    h('Button', {
                                        style: {
                                            margin: '0 5px'
                                        },
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        }

                                    }, '删除')
                                ])
                            ]);
                        }
                    }
                ]
            }
        },
        methods:{
            //翻页
            changePage(index){
                this.current = index;
                this.handleRead();
            },
            //读取列表数据
            handleRead(){
                let data = {};
                data.current = this.current;
                data.size = this.size;
                data.pageNameQuery=this.pageNameQuery;
                data.pageCreateUserQuery=this.pageCreateUserQuery;
                this.$get(api.pageTemplates.base, data).then(response => {
                    this.totalPage = this.util.calTotalPage(response.obj.total, this.size);
                    this.totalCount = response.obj.total;
                    this.records = [];
                    for (let i in response.obj.records) {
                        this.records.push(response.obj.records[i])
                    }
                });
            },
            //删除表单记录
            handleDelete(id){
                this.$delete(api.pageTemplates.base+"/"+id).then(response=>{
                    if(200==response.code){
                        this.handleRead();
                    }
                })
            },
            handleRowClick(row,index){
                let self=this;
                let data = {};
                data.current = this.current;
                data.size = this.size;
                self.$get(api.pageTemplates.base+"/"+row.id).then(resp=>{
                    if(200==resp.code&&resp.obj){
                        eventBus.$emit("showPageTemplate",resp.obj);
                    }
                })

            }
        },
        created(){
            this.handleRead();
        },
        mounted(){
            let self=this;
            eventBus.$on("freshPageList",function () {
                self.handleRead();
            });
        }
    }
</script>